<template>
  <a-modal v-model="visible" :footer="null" :closable="false" dialogClass="loginModal">
    <h4 class="titleh4">请绑定手机号码</h4>
    <div class="formData">
      <div class="item" style="margin-bottom:24px;">
        <img src="@/assets/image/icon_account.png" alt="">
        <a-input v-model="username" placeholder="请输入手机号码" class="input" />
      </div>
      <div class="item" style="margin-bottom:24px;">
        <img src="@/assets/image/icon_code.png" alt="">
        <a-input v-model="smsCode" placeholder="请填写短信验证码" class="input" />
        <a-button class="button" type="primary" size="large" style="width: 110px;margin-left:16px;flex: none;" @click="getCode">{{djs == '获取验证码'?"获取验证码":djs+"s"}}</a-button>
      </div>
      <!-- <div class="item">
        <img src="@/assets/image/icon_password.png" alt="">
        <a-input v-model="password" placeholder="请输入8-14位，字母、数字的组合密码" class="input" />
      </div> -->
      <div class="item" style="margin-top:32px;">
        <a-button class="button" type="primary" size="large" @click="register">立即绑定</a-button>
      </div>
    </div>

    <!-- 注册成功 -->
    <RegisterOk ref="registerOk" />
  </a-modal>
</template>

<script>
// 注册成功
import RegisterOk from '@/components/popup/register/registerOk.vue'
export default {
  components: { RegisterOk },
  props:['data'],
  data(){
    return{
      visible: false,
      username:"",
      password:"",
      smsCode:"",
      djs:"获取验证码"
    }
  },
  methods:{
    // 获取验证码
    getCode(){
      // console.log(this.phone)this.flag && ss
      if(this.djs != '获取验证码'){

      }else if(!this.username){
        this.$message.error("请输入手机号码！")
      }else if(!/^1[3-9]\d{9}$/.test(this.username)){
        this.$message.error("请检查手机号是否输入正确！")
      }else if(this.username && /^1[3-9]\d{9}$/.test(this.username)){
        // this.flag = false;
        // this.flagTimeout = setTimeout(()=>{
        //   this.flag = true;
        // },60000)
        // this.loading = true;
        this.djs = 60;
        let interval = setInterval(()=>{
          if(this.djs == 1){
            this.djs = '获取验证码';
            clearInterval(interval);
          }else{
            this.djs--;
          }
        },1000)
        this.$ajax({
          url:"/user/userinfo/sendsms?mobile="+this.username+"&type=7&openId="+this.data.openid,
          method:"post"
        }).then((res)=>{
          if(res.code == 200){
            this.$message.success("验证码已发送，请注意查收！")
          }else{
            // this.messageerror = res.msg;
            this.djs = '获取验证码';
            clearInterval(interval);
            // clearTimeout(this.flagTimeout);
            // this.flag = true;
            this.$message.error(res.msg);
          }
        })
      }
    },
    register(){
      // visible = false;$refs.registerOk.visible = true
      // console.log(this.data)
      this.data.userName = this.username;
      this.data.password = this.password;
      this.data.smsCode = this.smsCode;
      this.$ajax({
        url:"/authority/user/wx/login/bind",
        method:"post",
        params:this.data
      }).then((res)=>{
        if(res.code == 200){
          this.visible = false;
          if(res.data.newUserFlag == 'Y'){
            this.$refs['registerOk'].visible = true;
          }
          this.$store.commit('changelocalImgFlag',res.data.localImgFlag);
          this.$store.commit('changenickName',res.data.userinfo.nickName);
          this.$store.commit('changeresumeNo',res.data.userinfo.resumeNo);
          this.$store.commit('changepwdFlag',res.data.pwdFlag);
          this.$store.commit('changeroleType',res.data.userinfo.roleType);
          this.$store.commit('changemobile',res.data.userName);
          this.$store.commit('changepicture',res.data.userinfo.picture);
          this.$store.commit('changeToken',res.data.token);
          this.$store.commit('changeuserName',res.data.userName);
          localStorage.setItem('rememberPassword',false);
          localStorage.setItem('userName','');
          localStorage.setItem('password','');
        }else{
          this.$message.error(res.msg);
        }
      })
    }
  },
  created(){
  }
}
</script>

<style lang="less" scoped>
/deep/.loginModal{
  .ant-modal-body{
    padding: 60px;
    padding-bottom: 53px;
  }
}
.titleh4{
  font-size: 24px;
  line-height: 33px;
  margin-bottom: 55px;
}
.item{
  position: relative;
  display: flex;
  flex-direction: row;
  >img{
    position: absolute;
    left: 12px;
    z-index: 9;
    width: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
  }
}
.input{
  height: 48px;
  padding-left: 40px;
}
.button{
  height: 48px;
  width: 100%;
  display: block !important;
}
</style>
